<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="cans" width="500" height="500"></canvas>
		<script type="text/javascript">
			var cans=document.getElementById('cans');
			var c=cans.getContext('2d');
			
			c.fillStyle='green';
			c.fillRect(0,0,500,500);
			
			c.beginPath();
			c.strokeStyle='black';
			c.arc(250,100,50,0,Math.PI*2);
			c.stroke();
			c.closePath();
			
			c.beginPath();
			c.strokeStyle='black';
			c.arc(225,105,10,0,Math.PI*1,true);
			c.stroke();
			c.closePath();
			
			c.beginPath();
			c.strokeStyle='black';
			c.arc(275,105,10,0,Math.PI*1,true);
			c.stroke();
			c.closePath();
			

			
			c.beginPath();
			c.strokeStyle='black';
			c.arc(250,125,10,0,Math.PI*1);
			c.stroke();
			c.closePath();
			
			c.beginPath();
			c.strokeStyle='slateblue';
			c.moveTo(250,150);
			c.lineTo(300,200);
			c.stroke();
			c.closePath();
			
			c.beginPath();
			c.strokeStyle='slateblue';
			c.moveTo(250,150);
			c.lineTo(170,200);
			c.stroke();
			c.closePath();
			
			c.beginPath();
			c.strokeStyle='slateblue';
			c.moveTo(250,150);
			c.lineTo(250,300);
			c.stroke();
			c.closePath();
			
			c.beginPath();
			c.strokeStyle='slateblue';
			c.moveTo(250,300);
			c.lineTo(200,350);
			c.stroke();
			c.closePath();
			
			c.beginPath();
			c.strokeStyle='slateblue';
			c.moveTo(250,300);
			c.lineTo(300,350);
			c.stroke();
			c.closePath();
		</script>
	</body>
<html>
